<template>
  <div style="width: 1200px;margin: 0 auto;margin-top: 65px">
    <el-row style="background-color: white" :gutter="20">
      <el-col :span="16">
        <div style="height: 500px;width: 790px">
        <img :src="'http://localhost:19283/'+car.imgUrl" width="100%" height="100%">
        </div>
        <div style="position: sticky;top: 0px;background-color: white;/*z-index: 999*/">
          <el-row style="margin-top: 10px;">
            <el-col :span="4">
              <p @click="smoothScrollTo('rent-trend');" :style="[hoverStyle,getStyle('rent-trend')]">
                租金趋势
              </p>
            </el-col>
            <el-col :span="4">
              <p @click="smoothScrollTo('rent-time')" :style="[hoverStyle,getStyle('rent-time')]">
                可租用时间
              </p>
            </el-col>
            <el-col :span="4">
              <p @click="smoothScrollTo('car-restrictions')" :style="[hoverStyle,getStyle('car-restrictions')]">
                用车限制
              </p>
            </el-col>
            <el-col :span="4">
              <p @click="smoothScrollTo('car-config')" :style="[hoverStyle,getStyle('car-config')]">
                车辆配置
              </p>
            </el-col>
            <el-col :span="4">
              <p @click="smoothScrollTo('recommended-cars')" :style="[hoverStyle,getStyle('recommended-cars')]">
                优车推荐
              </p>
            </el-col>
            <el-col :span="4">
              <p @click="smoothScrollTo('platform-advantages')" :style="[hoverStyle,getStyle('platform-advantages')]">
                平台优势
              </p>
            </el-col>
          </el-row>
        </div>
        <el-divider id="rent-trend"></el-divider>
        <p style="font-size: 20px;font-weight: bolder;float: left;margin-top: 30px">租金趋势</p>
        <div
            style="border: 1px solid #ffeab8;border-radius: 20px;height: 40px;margin-top: 110px;background-color: #fffbf3">
          <p style="font-size:13px;float: left;margin-left: 15px;">月租折前价</p>
          <p style="font-size:18px;float: right;margin-top:10px;margin-right: 15px;color: #ff5c5c;font-weight: bolder">
            {{car.priceMonth}}
            <span style="font-size:13px;">元/月均</span>
          </p>
        </div>
        <div
            style="border: 1px solid #ffeab8;border-radius: 20px;height: 40px;margin-top: 10px;width: 400px;background-color: #fffbf3">
          <p style="font-size:13px;float: left;margin-left: 15px;">折后30-80天</p>
          <p style="font-size:18px;float: right;margin-top:10px;margin-right: 15px;color: #ff5c5c;font-weight: bolder">
            {{car.priceMonth}}
            <span style="font-size:13px;">元/月均</span>
          </p>
        </div>
        <div
            style="border: 1px solid #ffeab8;border-radius: 20px;height: 40px;margin-top: 10px;width: 400px;background-color: #fffbf3">
          <p style="font-size:13px;float: left;margin-left: 15px;">折后90-179天</p>
          <p style="font-size:18px;float: right;margin-top:10px;margin-right: 15px;color: #ff5c5c;font-weight: bolder">
            {{car.priceMonth}}
            <span style="font-size:13px;">元/月均</span>
          </p>
        </div>
        <div
            style="margin-bottom:50px;border: 1px solid #ffeab8;border-radius: 20px;height: 40px;margin-top: 10px;width: 400px;background-color: #fffbf3">
          <p style="font-size:13px;float: left;margin-left: 15px;">折后180-359天</p>
          <p style="font-size:18px;float: right;margin-top:10px;margin-right: 15px;color: #ff5c5c;font-weight: bolder">
            {{car.priceMonth}}
            <span style="font-size:13px;">元/月均</span>
          </p>
        </div>
        <el-divider id="rent-time"></el-divider>
        <p style="font-size: 20px;font-weight: bolder;margin-top: 55px;text-align: left;margin-bottom: 30px">可租用时间</p>
        <el-card>
          <el-calendar>
            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
            <template
                slot="dateCell"
                slot-scope="{date, data}">
              <p :class="data.isSelected ? 'is-selected' : ''">
                {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
              </p>
              <p class="price">￥{{car.priceDay}}</p>
            </template>
          </el-calendar>
        </el-card>
        <el-divider id="car-restrictions"></el-divider>
        <p style="font-size: 20px;font-weight: bolder;text-align: left;margin-top: 55px">用车限制</p>
        <el-row style="margin-top: 20px">
          <el-col :span="12">
            <p style="text-align: left">提前预定<span style="font-weight: bold;margin-left: 20px">2-4小时</span></p>
            <p style="text-align: left">不便交车<span style="font-weight: bold;margin-left: 20px">每天 23:00-次日07:00</span>
            </p>
          </el-col>
          <el-col :span="12">
            <p style="text-align: left">月均限行<span style="font-weight: bold;margin-left: 20px">月均限9000km</span></p>
            <p style="text-align: left">燃油政策<span style="font-weight: bold;margin-left: 20px">建议原油位返还</span></p>
          </el-col>
        </el-row>
        <el-divider id="car-config"></el-divider>
        <p style="font-size: 20px;font-weight: bolder;text-align: left;margin-top: 55px">车辆配置</p>
        <el-row>
          <el-col :span="8">
            <p style="text-align: left">车龄<span style="font-weight: bold;margin-left: 20px">{{car.age}}年</span></p>
            <p style="text-align: left">油箱容量<span style="font-weight: bold;margin-left: 20px">50L</span></p>
          </el-col>
          <el-col :span="8">
            <p style="text-align: left">排量<span style="font-weight: bold;margin-left: 20px">{{car.displacement}}</span></p>
            <p style="text-align: left">座椅<span style="font-weight: bold;margin-left: 20px">5位</span></p>
          </el-col>
          <el-col :span="8">
            <p style="text-align: left">动力：汽油<span style="font-weight: bold;margin-left: 20px">92(93)号汽油</span></p>
          </el-col>
        </el-row>
        <div style="text-align: left;margin:20px 0 130px 0">
          <div style="text-align: center;float: left;margin:0 60px 0 30px ">
            <img src="https://carphoto.atzuche.com/system/home/v591/daocheyingxiang_anhei.png" height="40px">
            <p style="margin-top: 5px;">倒车影像</p>
          </div>
          <div style="text-align: center;float: left;margin-right: 60px">
            <img src="https://carphoto.atzuche.com/system/home/v591/tianchuang_anhei.png" height="40px">
            <p style="text-align: center;margin-top: 5px">全景天窗</p>
          </div>
          <div style="text-align: center;float: left;margin-right: 60px">
            <img src="https://carphoto.atzuche.com/system/home/v591/xingchejiluyi_anhei.png" height="40px">
            <p style="text-align: center;margin-top: 5px">行车记录仪</p>
          </div>
          <div style="text-align: center;float: left">
            <img src="https://carphoto.atzuche.com/system/home/v591/zhenpizuoyi_anhei.png" height="40px">
            <p style="text-align: center;margin-top: 5px">织物座椅</p>
          </div>
        </div>
        <el-divider id="platform-advantages"></el-divider>
        <p style="font-size: 20px;font-weight: bolder;text-align: left;margin-top: 55px">平台优势</p>
        <p style="color: darkgrey;font-size: 15px; text-align: left;margin-top: -10px">
          凹凸出行，万款车型共享平台。APP一键下单、车管家送车上门、高额保障用车无忧。自2014年上线，凹凸出行已累计：</p>
        <el-row style="text-align: left">
          <el-col :span="6">
            <img width="30px" height="30px" style="margin: 15px 0 0 0"
                 src="">
            <p style="margin-top: 5px;font-size: 20px;font-weight: bold">10000+</p>
            <p style="margin-top: -15px;font-size: 15px;color: darkgrey">精选共享车型</p>
          </el-col>
          <el-col :span="6">
            <img width="30px" height="30px" style="margin: 15px 0 0 0"
                 src="">
            <p style="margin-top: 5px;font-size: 20px;font-weight: bold">300000+</p>
            <p style="margin-top: -15px;font-size: 15px;color: darkgrey">精选共享车型</p>
          </el-col>
          <el-col :span="6">
            <img width="30px" height="30px" style="margin: 15px 0 0 0" src="">
            <p style="margin-top: 5px;font-size: 20px;font-weight: bold">10000000+</p>
            <p style="margin-top: -15px;font-size: 15px;color: darkgrey">精选共享车型</p>
          </el-col>
          <el-col :span="6">
            <img width="30px" height="30px" style="margin: 15px 0 0 0" src="">
            <p style="margin-top: 5px;font-size: 20px;font-weight: bold">200+</p>
            <p style="margin-top: -15px;font-size: 15px;color: darkgrey">精选共享车型</p>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </el-col>
      <el-col :span="8">
        <img src="https://www.atzuche.com/static/media/bg4.f9fdb60e.jpg" width="100%">
        <img src="https://www.atzuche.com/static/media/bg5.e2563263.jpg" width="100%" style="margin-top: 10px">
        <div style="border: 1px solid #ececef;border-radius: 5px;height: 400px;margin-top: 20px;overflow: hidden">
          <div style="height: 369px;width: 317px;margin: 25px 0 0 20px;">
            <p style="margin-left:-200px;font-size: 14px;color: #ff5c5c">￥<span
                style="font-size: 27px;font-weight: bold;">{{car.priceMonth}}</span>/月均</p>
            <p style="margin:-5px 0 0 -150px;font-size: 22px;font-weight: bold;">{{car.name}} {{car.displacement}}</p>
          </div>
          <div
              style="border: 1px solid #ececef;border-radius: 4px;height: 48px;width: 330px;margin-top: -285px;margin-left: 27px">
            <p style="color: darkgrey;font-size: 15px;margin-right: 180px" @click="smoothScrollTo('rent-time')"
               :style="hoverStyle">
              查看可租用时间
            </p>
          </div>
          <div style="margin-top: 10px">
            <el-radio v-model="type" label="0">日租</el-radio>
            <el-radio v-model="type" label="1">月租</el-radio>
          </div>
          <a href="javascript:void(0)" @click="post(car.id,type)" style="text-decoration: none;">
            <div
                style="border: 1px solid #ececef;border-radius: 4px;height: 48px;width: 330px;margin-top:15px;margin-left: 27px;background-color: #42b983;">
              <p style="color: white;font-size: 15px;text-align: center;margin-top: 14px">点击下单吧！</p>
            </div>
          </a>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "DetailView",
  data() {
    return {
      type:"",
      car: {},
      //将鼠标设置为箭头
      hoverStyle: {cursor: 'pointer'},
      activeSection: 'rent-trend',
    }

  },
  methods: {
    post(id,type){
      const certStatus = localStorage.certStatus?JSON.parse(localStorage.certStatus):null;
      if (certStatus==2){
        this.$router.push('/pay?id='+id+'&type='+type)
      } else {
        this.$confirm('该账号还未进行认证审核', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push("/personal/audit");
        }).catch(() => {

        });
      }
    },
    detail(id) {
      //由于当前页面已经是/detail，所以不会跳转页面，下面代码只是修改了地址栏中的id
      this.$router.push('/detail?id='+id)
      this.loadCarDetail(id)
    },
    loadCarDetail(id) {
      this.axios.get('http://localhost:19482/car/'+ id ).then((response) => {
        if (response.data.state == 20000) {
          this.car = response.data.data
        }
      })
    },


    //平滑移动
    smoothScrollTo(anchor) {
      const element = document.getElementById(anchor);
      if (element) {
        element.scrollIntoView({behavior: 'smooth'});
      }
      this.activeSection = anchor;
    },
    //锚点样式
    getStyle(anchor) {
      return {
        fontSize: this.activeSection === anchor ? '18px' : '15px',
        color: this.activeSection === anchor ? 'black' : 'darkgrey',
        fontWeight: this.activeSection === anchor ? 'bolder' : 'normal',
        marginTop: this.activeSection === anchor ? '17px' : '20px'
      }
    },
  },
  mounted() {
    let id = new URLSearchParams(location.search).get('id')
    //通过id请求内容详情
    this.loadCarDetail(id)
  }
}
</script>

<style scoped>
.car {
  text-align: left;
  color: black;
  margin-top: 8px;
  font-weight: bold;
}

.car:hover {
  color: #42b983;
}

.pic {
  border-radius: 5px;
  width: 244px;
  height: 172px;
  transition: all 0.5s;
}

.pic:hover {
  transform: scale(1.03);
}

.price{
  font-size: 12px;
  color: darkgrey;
}
</style>